<template>
  <div class="task-top">
    <div class="task-top-city" @click="state.citySwitchBool = true">
      <i></i>
      <strong>{{ store.cityValue }}</strong>
      <span></span>
    </div>
    <input
      type="text"
      @click="router.push('/task/search')"
      readonly
      placeholder="请输入想要搜素的内容"
    />
    <router-link to="/message/systemList" class="task-icon-message"></router-link>
  </div>

  <van-popup
    v-model:show="state.citySwitchBool"
    position="top"
    duration="0"
    :style="{ width: '100%', height: '100%' }"
  >
    <SwitchCity @close="state.citySwitchBool = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { taskStore } from '@/store/task.ts';
import SwitchCity from '../SwitchCity/index.vue';

const router = useRouter();
const store = taskStore();

const state = reactive({
  citySwitchBool: false,
});
</script>

<style lang="scss" scoped>
.task-top {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.91rem;
}
.task-top-city {
  display: flex;
  align-items: center;
}
.task-top-city i {
  width: 1.04rem;
  height: 1.01rem;
  background: url('@/assets/img/icon/icon-place.png') no-repeat;
  background-size: 100%;
}
.task-top-city strong {
  font-size: 0.8rem;
  font-weight: 500;
  color: #333333;
  margin-left: 0.1rem;
}
.task-top-city span {
  margin: 0 0.6rem 0 0.2rem;
  display: inline-block;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-top: 0.36rem solid #333333;
}
.task-top input {
  flex: 1;
  height: 1.71rem;
  background: #ffffff url('@/assets/img/icon/icon-search.png') 0.35rem 0.3rem no-repeat;
  background-size: 9%;
  border: 0.03px solid #ededed;
  border-radius: 0.85rem;
  font-size: 0.69rem;
  font-weight: 300;
  color: #999999;
  padding-left: 1.7rem;
}

.task-icon-message {
  width: 1.31rem;
  height: 1.28rem;
  background: url('@/assets/img/icon/icon-remind.png') no-repeat;
  background-size: 100%;
  margin-left: 0.27rem;
}
</style>
